<%--
  Created by IntelliJ IDEA.
  User: HASEE
  Date: 2018/5/9
  Time: 19:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8" />
    <title>登录</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,
        body {
            height: 100%;
            width: 100%;
        }
        input, button, select, textarea {
            outline: none;
            -webkit-appearance: none;
            border-radius: 0;
        }
        ::-webkit-input-placeholder {
            /* WebKit browsers */
            color: #fff;
        }

        :-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #fff;
        }

        ::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #fff;
        }

        :-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #fff;
        }

        .login_section {
            position: relative;
            height: 100%;
            width: 100%;
            background-image: url("http://tlb.txasfx.com/crm/img/login_1.jpg");
            background-size: 100% 100%;
        }
        .form_box {
            height: 330px;
            width: 385px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            border: 2px solid #9292a3;
            box-shadow: 0px 0px 5px 3px #9292a3 inset;
            border-radius:10px;
            box-sizing: border-box;
            padding: 0 40px;
            padding-top: 30px;
            text-align: center;
            background-color: rgba(1,1,1,.2);
        }
        .form_box h3 {
            font-size: 28px;
            color: #fff;
            padding-bottom: 25px;
            margin-bottom: 25px;
            border-bottom: 2px solid #fff;
        }
        .form_box .input_box {
            border-radius: 20px;
            border: 1px solid #fff;
            margin-bottom: 20px;
        }
        .input_box img {
            position: relative;
            top: 8px;
        }
        .input_box input {
            height: 34px;
            width: 70%;
            line-height: 100%;
            padding: 0 10px;
            background-color: transparent;
            border: 0;
            color: #fff;
        }
        .btn_box button {
            cursor: pointer;
            font-size: 18px;
            color: #191a41;
            padding: 4px 30px;
            background-color: #FFFFFF;
            border: 1px solid #fff;
            border-radius: 20px;
            margin-top: 20px;
        }
        .btn_box button:last-of-type {
            color: #fff;
            background-color: transparent;
            border: 1px solid #fff;
            margin-left: 40px;
        }
        .copy_text {
            font-size: 12px;
            color: #fff;
            position: absolute;
            bottom: 5px;
        }
    </style>
</head>
<body>
<div class="login_section">
    <div class="form_box">
        <h3>CRM会员管理系统</h3>
        <form method="post" id="myLogin">
            <div class="input_box">
                <img src="imgs/l_01.png" alt="" />
                <input type="text" name="username" id="phone" value="" placeholder="请输入账号"/>
            </div>
            <div class="input_box">
                <img src="imgs/l_02.png" alt="" />
                <input type="password" name="password" id="pass" value="" placeholder="请输入密码"/>
            </div>
            <div class="btn_box">
                <button id="loginBtn">登录</button>
            </div>
        </form>
        <p class="copy_text">Copyright?2017-2018 TxasFx.All rights reseverd.</p>
    </div>
</div>
<script type="text/javascript">



    $("#loginBtn").click(login);
    //登录方法
    function login(){
        //登录方法,发送请求
        $.post('/login.do',$("#myLogin").serialize(),function(data){
            console.log(data);
            if (data.success) {
                //如果登录成功跳转到主页
                window.parent.location.href="/index.do";
            }else{
                //登录失败提示信息
                alert(data.msg);
            }
        },'json');
        return false;
    }
</script>
</body>
</html>


